<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>

<body>
  <script>
    let arr = [
      'ts', 'uniapp', 'nuxt', 'node', 'vite', 'webpack', 'nest', 'next', 'react', 'reactNative', 'electron', 'rust', '基础书籍'
    ]
    // let checkBox=document.createElement('input');
    var ul = document.createElement("ul");
    let obj = JSON.parse(localStorage.getItem('obj')) || {};
    arr.forEach(item => {
      createHTML(item)

    })
    document.documentElement.appendChild(ul);


    function createHTML (item) {
      var text = item;
      var checkbox = document.createElement("input");
      var li = document.createElement("li");
      checkbox.checked = obj[item]
      function fn (e) {
        console.log();
        e.target.type !== 'checkbox' ? checkbox.checked = !checkbox.checked : '';

        obj[item] = checkbox.checked;
        localStorage.setItem('obj', JSON.stringify(obj))
        e.stopPropagation();
      }




      var label = document.createElement("label");
      li.addEventListener('click', fn, false);

      // checkbox.addEventListener('click', fn, false);
      label.innerHTML = item
      checkbox.setAttribute("type", "checkbox");
      checkbox.setAttribute("name", item);
      li.appendChild(checkbox)
      li.appendChild(label)
      ul.appendChild(li)
    }
  </script>
</body>

</html>